<#include "/include/macros.ftl">
<@header></@header>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <@breadcrumb>
            <ol class="breadcrumb">
                <li><a href="/">首页</a></li>
                <li class="active">用户组用户管理</li>
            </ol>
        </@breadcrumb>
        <div class="x_panel">
            <div class="x_content">
                <div class="<#--table-responsive-->">
                    <div class="btn-group hidden-xs" id="toolbar">
                        <@shiro.hasPermission name="usergroup:add">
                            <button id="btn_add_user" type="button" class="btn btn-default" title="添加用户">
                                <i class="fa fa-plus"></i> 添加用户
                            </button>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="usergroup:delete">
                            <button id="btn_delete_ids" type="button" class="btn btn-default" title="批量删除">
                                <i class="fa fa-trash-o"></i> 批量删除
                            </button>
                        </@shiro.hasPermission>
                    </div>
                    <table id="tablelist">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹框-->
<div class="modal fade bs-example-modal-sm" id="selectUser" tabindex="-1" role="dialog" aria-labelledby="selectRoleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="selectUserLabel">查询用户</h4>
            </div>

            <div class="modal-body">
                <div class="input-group bottom-line">
                    <input type="text" class="form-control br-none" id="userName" name="userName" value="" required="required" placeholder="输入用户名">
                    <span class="input-group-btn">
                    <button class="btn btn-default br-none nav-search-btn pointer" id="queryUser" type="submit"><i class="fa fa-search"></i> 搜索</button>
                </div>
                <div class="clear" id="userInfo"></div>
            </div>
        </div>
    </div>
</div>

<@footer>
    <script>
        /**
         * 操作按钮
         * @param code
         * @param row
         * @param index
         * @returns {string}
         */
        function operateFormatter(code, row, index) {
            var trGroupId = row.id;
            var operateBtn = [
                '<@shiro.hasPermission name="usergroup:delete"><a class="btn btn-xs btn-danger btn-remove" data-id="' + trGroupId + '"><i class="fa fa-trash-o"></i>删除</a></@shiro.hasPermission>',
            ];
            return operateBtn.join('');
        }

        $(function () {
            var groupId = '${groupId}';
            var options = {
                url: "/user_group/list/"+groupId,
                // getInfoUrl: "/user_group/get/{id}",
                // updateUrl: "/user_group/edit",
                removeUrl: "/user_group/remove",
                // createUrl: "/user_group/add",
                columns: [
                    {
                        checkbox: true
                    }, {
                        field: 'name',
                        title: '用户姓名',
                        editable: true,
                    },  {
                        field: 'statusEnum',
                        title: '状态',
                        editable: false
                    }, {
                        field: 'operate',
                        title: '操作',
                        formatter: operateFormatter //自定义方法，添加操作按钮
                    }
                ],
                modalName: "用户"
            };
            //1.初始化Table
            $.tableUtil.init(options);
            //2.初始化Button的点击事件
            $.buttonUtil.init(options);

            /* 分配用户角色 */
            $('#btn_add_user').click(function () {
                console.log("选择用户");
                $('#selectUser').modal('show');

            });

            $("body").keydown(function() {
                if (event.keyCode == "13") {
                    $('#queryUser').click();
                }
            });


            $("#queryUser").click(function () {

                var userName = $("#userName").val();
                if (userName == '' || userName == undefined) return;
                $.ajax({
                    async: false,
                    type: "POST",
                    data: {userName: userName},
                    url: '/user/queryByUserName',
                    dataType: 'json',
                    success: function (json) {
                        var data = json.data;
                        console.log(data);
                        if(data == null || data == undefined) return ;
                        var html = "";

                        html +=
                            "<div class='fixed-table-body'>"+
                            "<table id='tablelist' class='table table-hover table-striped' style='margin-top: -40px;'>"+
                                "<thead>"+
                                    "<tr>"+
                                        /*"<th class='bs-checkbox ' style='width: 36px; ' data-field='0' tabindex='0'>"+
                                            "<div class='th-inner '>"+
                                                "<input name='btSelectAll' type='checkbox'>"+
                                            "</div>"+
                                            "<div class='fht-cell'></div>"+
                                        "</th>"+*/
                                        "<th style='' data-field='name' tabindex='0'>"+
                                            "<div class='th-inner '>用户名</div>"+
                                            "<div class='fht-cell'></div>"+
                                        "</th>"+
                                        "<th style='' data-field='email' tabindex='0'>"+
                                            "<div class='th-inner '>邮箱</div>"+
                                            "<div class='fht-cell'></div>"+
                                        "</th>"+
                                        /*"<th style='' data-field='statusEnum' tabindex='0'>"+
                                            "<div class='th-inner '>状态</div>"+
                                            "<div class='fht-cell'></div>"+
                                        "</th>"+*/
                                        "<th style='' data-field='operate' tabindex='0'>"+
                                            "<div class='th-inner '>操作</div>"+
                                            "<div class='fht-cell'></div>"+
                                        "</th>"+
                                    "</tr>"+
                                "</thead>"+
                                "<tbody>";
                                for(var i = 0 ;i<data.length; i++){
                                    html +=
                                    "<tr data-index='"+i+"'>"+
                                        /*"<td class='bs-checkbox '>"+
                                            "<input data-index='0' name='btSelectItem' type='checkbox'>"+
                                        "</td>"+*/
                                        "<td style=''>"+data[i].nickname+"</td>"+
                                        "<td style=''>"+data[i].email+"</td>"+
                                        /*"<td style=''>"+data[i].status+"</td>"+*/
                                        "<td style=''>"+
                                            "<a class='btn btn-xs btn-default btn-add' data-id='"+data[i].id+"'>"+
                                                "<i class='fa '></i>添加"+
                                            "</a>"+
                                        "</td>"+
                                    "</tr>";
                                }
                                html +=
                                "</tbody>"+
                            "</table>"+
                        "</div>"
                        console.log(html);
                        $("#userInfo").html(html);
                    }
                });
            });


            /* 添加用户*/
            $('#selectUser').on('click', '.btn-add', function () {
                var $this = $(this);
                var userId = $this.attr("data-id");
                $.ajax({
                    async: false,
                    type: "POST",
                    data: {userId: userId,groupId:groupId},
                    url: '/user_group/add',
                    dataType: 'json',
                    success: function (json) {
                        $.alert.ajaxSuccess(json);
                        $("#userName").val("");
                        $.tableUtil.refresh();
                        $("#userInfo").html("");
                    }
                });
            });




        });
    </script>
</@footer>